<template>
  <div>
    <!-- //搜索 -->
    <div class="searchInput">
      <el-input
        class="logInput"
        placeholder="请输入管理员名称"
        v-model="adminName"
      />
      <el-button
        type="primary"
        @click="onSearch"
      ><span class="iconfont icon-sousuo"></span>查找</el-button>
      <el-button
        type="primary"
        @click="addAdmin"
      ><span class="iconfont icon-icon-B-tianjiabiji"></span>添加</el-button>
    </div>
    <!-- //表格 -->
    <div class="tableBox">
      <el-table
        :data="adminTableData"
        border
      >
        <el-table-column
          prop="id"
          label="管理员ID"
        />
        <el-table-column
          prop="username"
          label="管理员名称"
        />
        <el-table-column
          prop="realname"
          label="真实姓名"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          label="管理员角色"
        >
          <template #default="scope" >
  <el-tag v-for="(item,index) in scope.row.roleIds" :key="index">
            {{roleId(item)}}
           </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleFlx(scope.row)"
            >修改</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog
        v-model="dialogFormVisible"
        :title="title"
      >
        <el-form
            ref="ruleFormRef"
          :model="form"
          label-position="right"
          label-width="auto"
    :rules="rules"
        >
          <el-form-item
            prop="username"
            label="用户名:"

          >
            <el-input
              style="width:180px"
              v-model="form.username"
              :disabled="title=='编辑'"
            />
          </el-form-item>
          <el-form-item
            label="密码:"
           prop="password"
          >
            <el-input
              style="width:180px"
              v-model="form.password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="手机号:"
             prop="phone"
          >
            <el-input
              style="width:180px"
              v-model="form.phone"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="真实姓名:"
           prop="realname"

          >
            <el-input
              style="width:180px"
              v-model="form.realname"
            />
          </el-form-item>
          <el-form-item
            label="角色"
            prop="region"
          >
            <el-select
              v-model="form.roleIds"
               multiple
              placeholder="请选择角色"
            >
              <el-option
                v-for="(item,index) in admindedsc"
                :label="item.label"
                :value="item.value"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              type="primary"
              @click="newAdd"
            >新增</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- //分页 -->
    <daily-demo
      v-bind="demo"
      @pages="pages"
      @limits="limits"
    ></daily-demo>
  </div>
</template>
<script>
import http from "@/util/http";
import DailyDemo from "@/components/DailyOperation/Demo.vue";
import {} from "element-plus";
export default {
  components: {
    DailyDemo,
  },
  data() {
    var text1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
      callback();
    };
    var text2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    var text3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入电话号码"));
      }
      callback();
    };
    var text4 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入真实姓名"));
      }
      callback();
    };
    return {
      //弹框标题
      title: "",
      //弹框的布尔值
      dialogFormVisible: false,
      //弹框数据
      form: {
        username: "",
        password: "",
        phone: "",
        realname: "",
        roleIds:[]
      },
      //修改的id
      id:"",
      //搜索管理员名称
      adminName: "",
      //管理员角色
      admindedsc: [],
      //管理员列表信息
      adminTableData: [],
      demo: {
        page: 1,
        limit: 10,
        total: 10, //分页--总条数
      },
      rules: {
        username: [//姓名验证
          {
            validator: text1,
            trigger: "blur",
            required: true,
          },
          {
            pattern: /^[\u4e00-\u9fa5]{2,20}$/,
            message: "姓名格式不对",
            trigger: "blur",
          },
        ],
        password: [//密码验证
          {
             validator: text2,
            trigger: "blur",
            required: true,
          },
          {
            pattern: /[A-Za-z0-9@#]{6,16}/,
            message: "密码格式不对",
            trigger: "blur",
          },
        ],
        phone: [//手机号格式验证
          {
             validator: text3,
            required: true,
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
        realname: [//真实姓名验证
          {
             validator: text4,
            trigger: "blur", required: true },
          {
            pattern: /^[\u4e00-\u9fa5]{2,20}$/,
            message: "姓名格式不对",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    roleId(v) {//表格渲染的角色
      return (v) => {
        for (const item of this.admindedsc) {
          if (v == item.value) {
            return item.label;
          }
        }
      };
    },
  },
  created() {
    // 管理员信息
    this.adminData();
  },
  methods: {
    //删除
    handleDelete(row) {
      ElMessageBox.confirm("确定要删除此数据吗?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let Delete = {
            _gp: "admin",
            _mt: "delete",
            id: row.id,
          };
          http.post(Delete).then((res) => {
            ElMessage.success("删除成功");
            this.adminData();
          });
        })
        .catch(() => {
          ElMessage.info("取消删除");
        });
    },
    //修改
    handleFlx(row) {
      this.title = "编辑";
      this.form.username = row.username;
      this.form.password = row.password;
      this.form.phone = row.phone;
      this.form.realname = row.realname;
      this.id = row.id;

      this.dialogFormVisible = true;
    },
    //点击新增影藏添加弹框
    newAdd() {
      if (this.title == "创建") {

        if (
          this.form.username != "" &&
          this.form.password != "" &&
          this.form.phone != "" &&
          this.form.realname != ""
        ) {
           let addData = {
          _gp: "admin",
          _mt: "create",
          adminDTO: JSON.stringify({...this.form}),
        };
          http.post(addData).then((res) => {
            if (200 == res.data.errno) {
            ElMessage.success("添加成功");
          }else{
            ElMessage.error(res.data.errmsg);
          }
        this.adminData();
          });
        } else {
          return ElMessage.error("输入框不能为空!");
        }
      } else {
        let flxData = {
          _gp: "admin",
          _mt: "edit",
          adminDTO: JSON.stringify({...this.form, id:this.id}),
        };
        http.post(flxData).then((res) => {
          if (200 == res.data.errno) {
            ElMessage.success("修改成功");
          }
            this.adminData();
        });
      }
      this.dialogFormVisible = false;
       this.adminData();
    },
    //重置
    resetForm(formEl){
      this.form.username = "";
      this.form.password = "";
      this.form.phone = "";
      this.form.realname = "";
  if (!formEl) return
  formEl.resetFields()
},
    //点击添加显示添加弹框
    addAdmin() {
      this.title = "创建";
      this.dialogFormVisible = true;
      this.form.username = "";
      this.form.password = "";
      this.form.phone = "";
      this.form.realname = "";
    },
    //搜索
    onSearch() {

      this.adminData();
    },
    adminData() {
      const admin = {
        _gp: "admin",
        _mt: "list",
        page: this.demo.page,
        limit: this.demo.limit,
        username: this.adminName,
      };
      http.post(admin).then((res) => {
        this.adminTableData = res.data.data.items;
        this.demo.total = res.data.data.total;
      });
      //管理员角色请求---角色枚举
      let Desc = {
        _gp: "admin.role",
        _mt: "options",
      };
      http.post(Desc).then((res) => {
        this.admindedsc = res.data.data;
      });
    },
    //分页---当前页数
    pages(e) {
      console.log(e, 456);
      this.demo.page = e;
      this.adminData();
    },
    // 分页---每页显示条目个数
    limits(e) {
      this.demo.limit = e;
      this.adminData();
    },

  },
};
</script>

<style lang="less" scoped>
.searchInput {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  //查找输入框的宽度
  .logInput {
    width: 200px;
    margin-right: 20px;
  }
}
</style>
